<template>
	<view class="course_list_container">

		<view class="this_ing_order" v-for="(item, index) in orderList2" :key='index'>
			<view class="ing_item">
				<text class="label">当前推广套餐</text>
				<text>{{item.name}}</text>
			</view>
			<!-- <view class="ing_item">
				<text class="label">使用进度</text>
				<view class="per_box">
					<view style="width: 50%;"></view>
				</view>
				<text>{{thisOrderInfo.progressionNum}}%</text>
			</view> -->
			<view class="ing_item">
				<text class="label">曝光量</text>
				<text style="color: red;font-size: 18px;">{{item.bgnumUsed}}/{{item.bgnum}}</text>
			</view>

			<view class="ing_item">
				<text class="label">套餐金额</text>
				<text>{{item.payMoney}}</text>
			</view>
			<view class="ing_item">
				<text class="label">创建时间</text>
				<text>{{item.createTime}}</text>
			</view>
			<view class="ing_item">
				<text class="label">推广内容</text>
				<text>{{item.context}}</text>
			</view>

		</view>

		<view class="item" v-for="(item, index) in orderList" :key='index'>
			<view class="pic_title align-center">

				<view class="title_box">
					<view class="name">{{item.name}}</view>
					<view class="label">订单号：{{item.ordersNo}}</view>
					<view class="label">支付金额：{{item.payMoney}}</view>
					<view class="label" style="color: red;">推广收入：{{item.reMoney}}</view>
					<view class="label">创建时间：{{item.createTime}}</view>
					<view class="label" v-if='item.ordersType==1'>订单种类：短剧</view>
					<view class="label" v-else-if='item.ordersType==2'>订单种类：会员</view>
					<view class="label" v-else-if='item.ordersType==3'>订单种类：充值</view>
					<view class="label" v-else-if='item.ordersType==100'>订单种类：推广订单</view>
					<view class="label">套餐状态：已结束</view>
					<view class="label">曝光量：{{item.bgnumUsed}}/{{item.bgnum}}</view>
					<view class="label">推广内容：{{item.context}}</view>
					<view class="label">推广状态：{{item.spreadStatus==1?'进行中':'已完结'}}</view>
				</view>
			</view>

		</view>

		<u-loadmore v-if="orderList.length > 0" :status="status" />
		<empty title="暂无资源" :isShow='false' v-if="orderList.length==0"></empty>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				orderList: [],
				status: 'loadmore',
				page: 1,
				limit: 10,
				thisOrderInfo: null,
				orderList2: []
			}
		},
		onLoad() {
			this.getorderList()
			this.getSpreadOrderInfo()
		},
		onShow() {


		},
		methods: {
			getSpreadOrderInfo() {
				this.$u.get("/app/VipDetailsSpread/queryCurrentSpreadOrderInfo2").then(
					res => {
						if (res.code === 0) {
							if (res.data != null) {
								this.orderList2 = res.data
							}
						} else {

						}
					});
			},
			getorderList() {

				let data = {
					limit: this.limit,
					page: this.page,
					status: 2
				}

				this.$u.get("/app/VipDetailsSpread/queryUserSpreadDetails", data).then(
					res => {
						if (res.code === 0) {
							this.pages = res.data.totalPage
							if (this.page < this.pages) {
								this.status = 'loadmore'
							} else {
								this.status = 'nomore'
							}
							if (this.page == 1) {
								this.orderList = res.data.records
							} else {
								this.orderList = [...this.orderList, ...res.data.records]
							}
						} else {
							uni.stopPullDownRefresh();
						}
					});


			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			},
		},
		onReachBottom: function() {
			console.log('onReachBottom>>>>>>>')
			if (this.page < this.pages) {
				this.page += 1
				this.status = 'loading'
				this.getorderList()

			} else {
				this.status = 'nomore'
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getorderList()
		},

	}
</script>

<style scoped lang="scss">
	.course_list_container {
		padding: 20rpx;

		.this_ing_order {
			background: #f8d3d3;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.ing_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 10rpx;

				.label {
					font-weight: 400;
					font-size: 28rpx;
					color: #969696;
					width: 200rpx;
					flex-shrink: 0;
				}

				text {
					&:nth-child(2) {
						font-size: 28rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #000;
						text-align: right;
					}
				}

				.per_box {
					flex: 1;
					height: 20rpx;
					background: rgba(25, 190, 107, 0.2);
					margin-left: 10rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 10rpx;

					view {
						background: rgba(25, 190, 107, 1);
						height: 20rpx;
						border-radius: 20rpx;
					}
				}
			}
		}

		.item {
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.pic_title {
				display: flex;

				image {
					width: 160rpx;
					height: 200rpx;
					border-radius: 8rpx;
					margin-right: 16rpx;
					flex-shrink: 0;
				}

				.name {
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 500rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.label {
					font-weight: 400;
					font-size: 28rpx;
					color: #969696;
					padding-top: 6rpx;

					text {
						font-weight: bold;
						font-size: 32rpx;
						color: #0D0D0D;
					}
				}

				.type {
					border: 1px solid #8B8FF0;
					color: #8B8FF0;
					margin-right: 4rpx;
					padding-top: 6rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
				}

				.label_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #969696;
					// display:block;
					// white-space:nowrap;
					// overflow:hidden;
					// text-overflow:ellipsis;
					// width: 500rpx;
				}
			}

			.btn_box {
				display: flex;
				margin-top: 20rpx;
				justify-content: flex-end;

				button {
					margin: 0 !important;
					margin-left: 20rpx !important;
				}
			}
		}
	}
</style>